<template>
  <div class="goods-list">
    <!-- 商品类型 -->
    <div class="goods-list-left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item title="肉扒类" />
        <van-sidebar-item title="焗饭类" />
        <van-sidebar-item title="意粉类" />
        <van-sidebar-item title="蒸饭类" />
        <van-sidebar-item title="小食类" />
        <van-sidebar-item title="饮品类" />
        <van-sidebar-item title="蛋糕类" />
        <van-sidebar-item title="汉堡类" />
      </van-sidebar>
    </div>
    <!-- if语句判断变量activeKey按对应index跳转 -->
    <div class="goods-list-right" v-if="activeKey == 0">
      <van-swipe-cell>
        <van-card
          class="goods-card"
          @click="activeGoodsHandle(goods)"
          v-for="goods in goodsList"
          :key="goods.id"
          :price="`${goods.price}/${goods.unit}`"
          :title="goods.title"
          :thumb="goods.thumb"
        >
          <template #tags>
            <van-tag plain type="danger" color="#a9a9a9"
              >销量{{ goods.selesCount }}</van-tag
            >
          </template>
          <template #footer>
            <div class="btn-box">
              <div
                @click.stop="updateBuyCount(goods, false)"
                class="subtrat-btn"
                v-show="goods.buyCount !== 0"
              >
                -
              </div>
              <div class="buy-count" v-show="goods.buyCount !== 0">
                {{ goods.buyCount }}
              </div>
              <div @click.stop="updateBuyCount(goods, true)" class="add-btn">
                +
              </div>
            </div>
          </template>
        </van-card>
      </van-swipe-cell>
    </div>
    <div class="goods-list-right" v-if="activeKey == 1">
      <van-swipe-cell>
        <van-card
          num="1"
          price="28.00"
          desc="焗饭类2222"
          title="焗饭类"
          class="goods-card"
          thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </van-swipe-cell>
    </div>
    <!-- 显示遮罩层 -->
    <van-overlay :show="show" z-index="9999">
      <div class="wrapper" v-if="show">
        <div class="wrapper-top">
          <h4>{{ isActiveGoods.mealName }}</h4>
          <div class="block">
            <van-image
              class="van-image"
              width="10rem"
              height="10rem"
              fit="contain"
              :src="isActiveGoods.mealPictures[0]"
            />
            <h5>销量{{ isActiveGoods.mealSales }} | 好评率100%</h5>
            <van-icon size="30" name="close" @click="show = false" />
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 购物车 -->
    <div class="shop-card-box">
      <div class="shop-card">
        <div class="no-choise" v-if="billList.length === 0">
          <div class="card-icon">
            <van-icon name="shopping-cart-o" color="#1989fa" size="30px" />
          </div>
          <span class="text">请选择商品</span>
        </div>
        <div class="having-choise" v-else>
          <div class="card-icon">
            <van-badge :content="billCount">
              <van-icon name="shopping-cart-o" color="#1989fa" size="30px" />
            </van-badge>
          </div>
          <div class="price-total">{{ billTotal }}￥</div>
          <div class="go-account">去结算</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "goodsList",
  data() {
    return {
      activeKey: 0,
      show: false,
      goodsList: [
        {
          id: 1,
          price: 28,
          title: "曲纹薯条",
          unit: "份",
          thumb: "https://img01.yzcdn.cn/vant/cat.jpeg",
          selesCount: 100,
          buyCount: 0,
        },
        {
          id: 2,
          price: 1,
          title: "曲纹薯条11",
          unit: "份",
          thumb: "https://img01.yzcdn.cn/vant/cat.jpeg",
          selesCount: 100,
          buyCount: 0,
        },
      ],
      isActiveGoods: {},
      billList: [],
    };
  },
  methods: {
    updateBuyCount(goods, isAdd) {
      let index = this.billList.indexOf(goods);
      if (~index) {
        // 如果未找到就不需要删除, 如果是更新就删除掉原来的
        this.billList.splice(index, 1);
      }
      if (isAdd) {
        goods.buyCount++;
      } else {
        goods.buyCount--;
        if (goods.buyCount <= 0) {
          goods.buyCount = 0;
          return; // 删除就行不需要添加
        }
      }
      // 在原来的位置添加最新的
      this.billList.splice(index, 0, goods);
      console.log(this.billList);
    },
    activeGoodsHandle(goods) {
      this.show = true;
      this.isActiveGoods = goods;
    },
  },
  computed: {
    billTotal() {
      let total = this.billList.reduce((init, goods) => {
        return init + goods.price * goods.buyCount;
      }, 0);
      return total;
    },
    billCount() {
      let count = this.billList.reduce((init, goods) => {
        return init + goods.buyCount;
      }, 0);
      return count;
    },
  },
};
</script>

<style scoped>
.goods-list {
  position: relative;
  display: flex;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 65px;
}
/* 商品类型 */
.goods-list-left {
  height: 100%;
  overflow: auto;
}
/* 商品内容 */
.goods-list-right {
  /* margin: right; */
  width: 78%;
  height: 100%;
  overflow: auto;
}
.goods-card {
  margin: 0;
  background-color: white;
}
/* 遮罩层 */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.wrapper-top {
  width: 200px;
  height: 210px;
  background-color: white;
  position: relative;
}

.block {
  position: absolute;
  left: 20px;
}
.block > i {
  color: #fff;
  margin: 20px 0 30px 65px;
}

.wrapper-top > h4 {
  font-size: 15px;
  color: #000;
}
.block > h5 {
  color: gray;
  font-size: 8px;
  padding-top: 2px;
  font-weight: 100;
}

/* 购物车 */
.shop-card-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 65px;
  width: 100%;
}
.shop-card {
  display: flex;
  align-items: center;
  position: absolute;
  width: 80%;
  height: 50px;
  background-color: #000;
  border-radius: 30px;
  overflow: hidden;
}
.no-choise {
  display: flex;
  align-items: center;
}
.card-icon {
  margin: 0 25px;
}
.text {
  color: #ccc;
  font-size: 12px;
}
.having-choise {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.price-total {
  display: flex;
  align-items: center;
  flex-grow: 1;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
.having-choise .card-icon {
  margin: 0 10px;
}
.go-account {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 30%;
  background-color: rgb(30, 189, 252);
  color: #fff;
  font-weight: 700;
}

.btn-box {
  display: flex;
  justify-content: flex-end;
}
div[class$="-btn"] {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(30, 189, 252);
  font-size: 18px;
  color: #fff;
  box-sizing: border-box;
}
div.subtrat-btn {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #ccc;
  line-height: 16px;
}

.buy-count {
  line-height: 20px;
  margin: 0 5px;
}
</style>
